<template>
  <view class="waterfall">
    <uv-waterfall ref="waterfall" v-model="goodsList" :left-gap="leftGap" :right-gap="rightGap" :column-gap="columnGap"
      @changeList="changeList">
      <template v-slot:list1>
        <view v-for="(item, index) in list1" class="waterfall-item" :key="item.id" @click="goToDetail(item.id)">
          <view class="goods-image" :style="[imageStyle]">
            <my-image :src="item.url.split(',')[0]" mode="aspectFill" :customStyle="imageStyle">
            </my-image>
          </view>
          <view class="goods-ft">
            <uv-text :lines="2" :text="item.name"></uv-text>
            <uv-text color="#ff7744" mode="price" :text="item.price"></uv-text>
            <view class="goods-sale">
              数量：{{ item.remain }}
            </view>
          </view>
        </view>
      </template>
      <template v-slot:list2>
        <view v-for="(item, index) in list2" class="waterfall-item" :key="item.id" @click="goToDetail(item.id)">
          <view class="goods-image" :style="[imageStyle]">
            <my-image :src="item.url.split(',')[0]" mode="aspectFill" :customStyle="imageStyle">
            </my-image>
          </view>
          <view class="goods-ft">
            <uv-text :lines="2" :text="item.name"></uv-text>
            <uv-text color="#ff7744" mode="price" :text="item.price"></uv-text>
            <view class="goods-sale">
              数量：{{ item.remain }}
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
    <view style="padding-top: 10px;background-color: #fff;" v-if="goodsList.size > 4">
      <uv-load-more bgColor="#fff" :status="loadStatus" @loadmore="loadTabExpress"></uv-load-more>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getGoodsList } from '@/api/goods'
import type { Goods } from '@/api/goods'
import type { BaseResponse, BasePageReq } from '@/api/base'
import { toast } from '@/utils/common'
const goodsList = ref<Goods[]>([])
const list1 = ref<Goods[]>([])
const list2 = ref<Goods[]>([])
const loadStatus = ref<string>('loadmore')
const moreStatus = ref<boolean>(true)
const pageReq = ref<BasePageReq>({ pageNum: 1, pageSize: 10 })
const leftGap = ref<number>(10)
const rightGap = ref<number>(10)
const columnGap = ref<number>(10)

const loadGoodsList = async () => {
  loadStatus.value = 'loading'
  try {
    const res: BaseResponse = await getGoodsList(pageReq.value)
    if (!res.data || res.data.records.length == 0 || res.data.total < goodsList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    goodsList.value = goodsList.value.concat(res.data.records)
    loadStatus.value = 'loadmore'
    pageReq.value.pageNum++
  } catch (error: BaseResponse) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}

onLoad(() => {
  loadGoodsList()
})

const imageStyle = computed(() => {
  const v = uni.upx2px(750) - leftGap.value - rightGap.value - columnGap.value
  const w = v / 2
  const rate = w / 600
  const h = rate * 400
  return {
    width: w + 'px',
    height: h + 'px'
  }
})

const changeList = (e: any) => {
  if (e.name === 'list1') {
    list1.value.push(e.value)
  } else {
    list2.value.push(e.value)
  }
}

const loadTabExpress = async () => {
  loadGoodsList()
}
onReachBottom(() => {
  // 如果依然还有数据，就触发
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadGoodsList()
      loadStatus.value = 'loadmore'
    }, 500)
  }
})
const goToDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/goods/detail?id=${id}`
  })
}

</script>

<style lang="scss" scoped>
.waterfall {
  margin-top: 10rpx;
  background-color: #f1f1f1;
}

.waterfall-item {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 6px;
}

.goods-ft {
  padding: 20rpx;
  background: #fff;

  .goods-price {
    color: #ff4400;
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }

  .goods-sale {
    font-size: 24rpx;
    text-align: right;
    color: #999;
  }
}
</style>